Wake Lock API: Kattava opas näytön nukahtamisen estämiseen

Nykypäivän digitaalisessa maailmassa käyttökokemus (UX) on ensisijaisen tärkeää. Saumaton, keskeytymätön vuorovaikutus voi olla ero iloisen ja turhautuneen käyttäjän välillä. Yksi yleisimmistä, mutta usein huomiotta jätetyistä, kitkakohdista on laitteen näytön sammuminen epäsopivalla hetkellä. Kuvittele, että seuraat monimutkaista reseptiä, pidät tärkeää esitystä tabletiltasi tai näytät digitaalista lippua portilla, ja näyttö pimenee. Tämän ongelman Wake Lock API ratkaisee elegantisti.

Tämä kattava opas tutkii Wake Lock API:a perusteellisesti. Käsittelemme, mikä se on, miksi se on välttämätön tietyille sovelluksille, kuinka se otetaan käyttöön oikein ja parhaat käytännöt sen vastuullisen käytön varmistamiseksi. Olitpa kokenut web-kehittäjä tai vasta aloittelija, saat tiedot, joiden avulla voit parantaa verkkosovelluksiasi ja tarjota ylivertaisen käyttökokemuksen.

Ydinongelma: Aggressiivinen virranhallinta vs. käyttäjän tarpeet

Laitevalmistajat ja käyttöjärjestelmien kehittäjät työskentelevät väsymättä optimoidakseen akun kestoa. Yksi heidän päätyökaluistaan on aggressiivinen virranhallinta, johon kuuluu näytön himmentäminen ja lopulta sammuttaminen lyhyen käyttämättömyysjakson jälkeen. Useimmissa käyttötapauksissa, kuten artikkeleiden selaamisessa tai sähköpostien tarkistamisessa, tämä on fantastinen ominaisuus, joka säästää arvokasta akkuvirtaa.

Tämä käyttäytyminen muodostuu kuitenkin merkittäväksi esteeksi sovelluksille, joissa käyttäjä on sitoutunut mutta ei fyysisesti vuorovaikutuksessa näytön kanssa. Harkitse näitä yleisiä maailmanlaajuisia skenaarioita:

• Ruuanlaitto: Käyttäjä seuraa reseptiä tabletiltaan. Hänen kätensä ovat jauhoissa, ja näyttö sammuu juuri ennen kuin hänen pitäisi tarkistaa seuraava vaihe.
• Julkinen esiintyminen: Esiintyjä käyttää verkkopohjaista esitystä. Hän pysähtyy selittämään yksityiskohtaa, ja näyttö himmenee, mikä häiritsee esityksen kulkua.
• Matkustus ja tapahtumat: Matkustajalla on lentoyhtiön tarkastuskortti, QR-koodi, näytöllä puhelimessaan. Portilla hänen on toistuvasti napautettava näyttöä pitääkseen sen hereillä jonottaessaan.
• Kuntoilu ja terveys: Joku seuraa verkkopohjaista jooga- tai HIIT-harjoitusta (korkean intensiteetin intervalliharjoittelu), ja näytön nukahtamisajastin keskeyttää treenin.

Aiemmin kehittäjät turvautuivat oveliin mutta tehottomiin "kikkailuihin" tämän ongelman ratkaisemiseksi, kuten toistamalla äänetöntä videota taustalla. Nämä menetelmät olivat epäluotettavia, kuluttivat tarpeettomia resursseja eivätkä olleet standardoitu ratkaisu. Verkko tarvitsi paremman tavan – muodollisen, tehokkaan ja käyttäjää kunnioittavan mekanismin näytön tilan hallintaan. Tässä kohtaa Wake Lock API astuu kuvaan.

Esittelyssä Wake Lock API

Wake Lock API on moderni verkkostandardi, joka tarjoaa muodollisen mekanismin verkkosovellukselle pyytää "wake lockia", joka estää laitteen näyttöä himmenemästä tai lukittumasta. Se on yksinkertainen mutta tehokas työkalu, jonka suunnittelun ytimessä ovat turvallisuus, tehokkuus ja käyttäjän suostumus.

API:n keskeisiä ominaisuuksia ovat:

• Käyttäjäkeskeinen: Se voidaan aktivoida vain vastauksena käyttäjän toimenpiteeseen, kuten klikkaukseen tai napautukseen. Verkkosivusto ei voi hankkia "wake lockia" hiljaa taustalla.
• Näkyvyydestä tietoinen: "Wake lock" vapautetaan automaattisesti, kun välilehti tai ikkuna ei ole enää näkyvissä. Tämä on kriittinen turvallisuus- ja virransäästöominaisuus.
• Vain suojatuissa yhteyksissä: API on saatavilla vain HTTPS-protokollan kautta tarjoilluilla sivuilla, mikä vahvistaa nykyaikaisia verkon turvallisuusstandardeja.
• Tehokas: Se on natiivi selainominaisuus, mikä tekee siitä huomattavasti energiatehokkaamman kuin aiemmat kiertotavat.

Tällä hetkellä API tukee yhtä "wake lock" -tyyppiä: 'screen'. Tämä tyyppi estää näyttöä sammumasta. Vaikka joillakin natiivialustoilla on käsite `system` wake lockista (joka pitää suorittimen käynnissä), sitä ei ole saatavilla verkossa turvallisuus- ja vakaussyistä.

Wake Lock API:n käyttöönotto: Vaiheittainen opas

Nyt sukellamme Wake Lock API:n käytännön puoliin. Rakennamme vankan toteutuksen, joka kattaa ominaisuuksien tunnistamisen, lukon pyytämisen ja vapauttamisen sekä näkyvyysmuutosten käsittelyn.

Vaihe 1: Ominaisuuden tunnistus

Ennen minkään modernin API:n käyttöä ensimmäinen vaihe on aina tarkistaa, tukeeko käyttäjän selain sitä. Tämä käytäntö, joka tunnetaan ominaisuuksien tunnistamisena, varmistaa, että sovelluksesi ei hajoa vanhemmilla selaimilla. Voit tarkistaa Wake Lock API:n olemassaolon katsomalla, onko 'wakeLock' olemassa navigator-oliossa.

            
if ('wakeLock' in navigator) {
  // Wake Lock API on tuettu.
  console.log('Screen Wake Lock API on tuettu!');
} else {
  // Wake Lock API ei ole tuettu.
  console.log('Screen Wake Lock API ei ole tuettu tässä selaimessa.');
}

            

              
                Copy
              
            
          

Tämä yksinkertainen tarkistus antaa sinun tarjota vararatkaisun tai yksinkertaisesti piilottaa toiminnallisuuden käyttäjiltä, joiden selaimet eivät tue sitä. Tätä periaatetta kutsutaan nimellä hallittu heikentyminen (graceful degradation).

Vaihe 2: Näytön "wake lockin" pyytäminen

Wake lockin pyytäminen on asynkroninen operaatio, koska se saattaa vaatia käyttäjän luvan tai muita tarkistuksia. Siksi navigator.wakeLock.request()-metodi palauttaa Promise-olion. Metodi ottaa yhden argumentin: pyytämäsi lukon tyypin, joka toistaiseksi on aina 'screen'.

Koska kyseessä on Promise-pohjainen API, paras tapa käsitellä sitä on async/await-rakenne try...catch-lohkon sisällä. try-lohko käsittelee lukon onnistuneen hankinnan, ja catch-lohko käsittelee mahdolliset virheet, kuten käyttäjän luvan epäämisen tai dokumentin passiivisuuden.

Luodaan funktio lukon pyytämiseksi:

            
// Määritellään globaali muuttuja "wake lock sentinel" -oliolle.
let wakeLockSentinel = null;

const requestWakeLock = async () => {
  if ('wakeLock' in navigator) {
    try {
      wakeLockSentinel = await navigator.wakeLock.request('screen');
      wakeLockSentinel.addEventListener('release', () => {
        console.log('Screen Wake Lock vapautettiin');
      });
      console.log('Screen Wake Lock on aktiivinen');
    } catch (err) {
      // Pyyntö epäonnistui - ehkä käyttäjä epäsi luvan.
      console.error(`${err.name}, ${err.message}`);
    }
  }
};

            

              
                Copy
              
            
          

Käydään tämä läpi osa osalta:

• Määrittelemme muuttujan wakeLockSentinel laajempaan näkyvyysalueeseen. Tämä muuttuja säilyttää olion, joka edustaa aktiivista lukkoamme.
• try-lohkon sisällä odotamme (await) navigator.wakeLock.request('screen')-kutsun tulosta.
• Onnistuessaan promise ratkeaa ja palauttaa WakeLockSentinel-olion. Tämä olio on avaimemme lukon hallintaan.
• Lisäämme sitten tapahtumankuuntelijan sentinel-oliolle 'release'-tapahtumaa varten. Tämä tapahtuma laukeaa, kun lukko vapautetaan mistä tahansa syystä (esim. välilehden näkyvyyden muutos, manuaalinen vapautus), mikä on hyödyllistä käyttöliittymän päivittämisessä.

Vaihe 3: `WakeLockSentinel`-olion ymmärtäminen

Kun hankit onnistuneesti "wake lockin", saat WakeLockSentinel-olion. Tämä olio on rajapintasi lukkoon. Sillä on kaksi keskeistä ominaisuutta:

• release()-metodi: Metodi, jonka voit kutsua vapauttaaksesi "wake lockin" manuaalisesti. Tämä palauttaa Promise-olion, joka ratkeaa, kun lukko on vapautettu.
• released-ominaisuus: Boolean-arvo, joka on false, kun lukko on aktiivinen, ja muuttuu true-arvoksi, kun se on vapautettu.
• type-ominaisuus: Merkkijono, joka kertoo hankitun lukon tyypin (esim. 'screen').

Vaihe 4: "Wake lockin" vapauttaminen

Yhtä tärkeää kuin lukon hankkiminen on tietää, milloin ja miten se vapautetaan. Sinun ei tulisi pitää näyttöä hereillä loputtomiin. Vapauta lukko heti, kun käyttäjä on suorittanut tehtävän, joka sitä vaati.

Esimerkiksi esityssovelluksessa voit vapauttaa lukon, kun käyttäjä siirtyy takaisin diojen muokkaustilaan. Reseptisovelluksessa sinulla voi olla painike, jossa lukee "Olen valmis ruoanlaitossa", joka vapauttaa lukon.

Näin voit luoda funktion lukon manuaaliseen vapauttamiseen:

            
const releaseWakeLock = async () => {
  if (wakeLockSentinel) {
    await wakeLockSentinel.release();
    wakeLockSentinel = null;
  }
};

            

              
                Copy
              
            
          

Tämä funktio tarkistaa, onko wakeLockSentinel olemassa. Jos on, se kutsuu release()-metodia ja asettaa sitten sentinel-muuttujan takaisin null-arvoon. Tämä on hyvän käytännön mukaista tilanhallintaa, joka tekee selväksi, ettei mikään lukko ole tällä hetkellä aktiivinen.

Vaihe 5: Tärkein osa - näkyvyysmuutosten käsittely

Wake Lock API:n keskeinen suunnitteluperiaate on, että lukot on sidottu sivun näkyvyyteen. Jos käyttäjä siirtyy toiseen välilehteen tai pienentää ikkunan, selain vapauttaa "wake lockin" automaattisesti. Tämä on ratkaiseva ominaisuus akun säästämiseksi ja käyttäjän itsemääräämisoikeuden kunnioittamiseksi.

Mutta mitä tapahtuu, kun käyttäjä palaa välilehdellesi? Lukko on poissa. Vankan toteutuksen on kuunneltava näkyvyysmuutoksia ja hankittava lukko uudelleen, jos se oli aktiivinen ennen kuin käyttäjä siirtyi pois.

Voimme saavuttaa tämän kuuntelemalla visibilitychange-tapahtumaa document-oliossa.

            
const handleVisibilityChange = async () => {
  if (wakeLockSentinel !== null && document.visibilityState === 'visible') {
    // Välilehti on tullut näkyviin ja meillä oli aiemmin "wake lock".
    // Hankitaan se uudelleen.
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

            

              
                Copy
              
            
          

Tässä käsittelijässä tarkistamme kaksi ehtoa: oliko "wake lock" aiemmin aktiivinen (eli wakeLockSentinel ei ole null), ja onko dokumentti nyt näkyvissä? Jos molemmat ovat totta, kutsumme requestWakeLock-funktiotamme uudelleen. Tämä takaa saumattoman kokemuksen käyttäjälle. Huomaa, että kun lukko vapautetaan automaattisesti näkyvyysmuutoksen vuoksi, alkuperäisen wakeLockSentinel-oliomme released-ominaisuus muuttuu todeksi, mutta muuttujaviittauksemme säilyy. Parempi lähestymistapa voisi olla erillisen lipun käyttö.

Kaikki yhdessä: Vankka esimerkki

Yhdistetään kaikki osat täydelliseksi, uudelleenkäytettäväksi esimerkiksi. Käytämme yksinkertaista painiketta kytkeäksemme "wake lockin" päälle ja pois, ja käsittelemme kaikki aiemmin mainitut reunatapaukset.

            
<h2>Wake Lock API -demo</h2>
<p>Napsauta painiketta aktivoidaksesi tai deaktivoidaksesi näytön "wake lockin".</p>
<button id="wakeLockToggleButton">Aktivoi näytön Wake Lock</button>
<p id="wakeLockStatus">Tila: Ei-aktiivinen</p>

<script>
let wakeLockSentinel = null;

// Käyttöliittymän elementit
const toggleButton = document.getElementById('wakeLockToggleButton');
const statusDiv = document.getElementById('wakeLockStatus');

// Funktio "wake lockin" pyytämiseen
const requestWakeLock = async () => {
  try {
    wakeLockSentinel = await navigator.wakeLock.request('screen');
    
    // Kuunnellaan vapautustapahtumia
    wakeLockSentinel.addEventListener('release', () => {
      // "Wake lock" on vapautettu.
      statusDiv.textContent = 'Tila: Ei-aktiivinen';
      toggleButton.textContent = 'Aktivoi näytön Wake Lock';
      // Asetamme sentinelin null-arvoon varmistaaksemme, että näkyvyyskäsittelijämme tietää lukon vapautuneen.
      wakeLockSentinel = null; 
    });
    
    statusDiv.textContent = 'Tila: Aktiivinen - Näyttösi ei nukahda.';
    toggleButton.textContent = 'Deaktivoi näytön Wake Lock';
    console.log('Screen Wake Lock on aktiivinen.');

  } catch (err) {
    // Pyyntö epäonnistui.
    statusDiv.textContent = `Tila: Virhe - ${err.name}, ${err.message}`;
    console.error(`Wake Lock -pyyntö epäonnistui: ${err.name}, ${err.message}`);
  }
};

// Funktio "wake lockin" vapauttamiseen
const releaseWakeLock = async () => {
  if (wakeLockSentinel) {
    await wakeLockSentinel.release();
    wakeLockSentinel = null;
  }
};

// Vaihtopainikkeen tapahtumankuuntelija
toggleButton.addEventListener('click', async () => {
  if (wakeLockSentinel) {
    await releaseWakeLock();
  } else {
    await requestWakeLock();
  }
});

// Hankitaan "wake lock" uudelleen, jos sivu tulee taas näkyviin
document.addEventListener('visibilitychange', async () => {
  // Tämä tarkistus on tärkeä. Haluamme hankkia lukon uudelleen vain,
  // jos se oli aktiivinen ennen välilehden piilottamista. Kuitenkin sentinel
  // vapautetaan automaattisesti, joten tarvitsemme erillisen lipun tai tarkistuksen.
  // Yksinkertaisempi logiikka on tarkistaa, halusiko käyttäjä sen olevan päällä.
  // Tässä demossa oletamme, että jos painikkeessa lukee "Deaktivoi", käyttäjä haluaa sen päälle.
  if (document.visibilityState === 'visible' && toggleButton.textContent === 'Deaktivoi näytön Wake Lock') {
    await requestWakeLock();
  }
});

// Alustava tarkistus API-tuelle
if (!('wakeLock' in navigator)) {
  statusDiv.textContent = 'Tila: Wake Lock API ei ole tuettu.';
  toggleButton.disabled = true;
}
</script>

            

              
                Copy
              
            
          

Parhaat käytännöt ja maailmanlaajuiset huomiot

Wake Lock API on tehokas työkalu, ja suuren vallan myötä tulee suuri vastuu. Sen väärinkäyttö voi johtaa akkujen tyhjenemiseen ja huonoon käyttökokemukseen. Tässä on joitakin olennaisia parhaita käytäntöjä, joita kannattaa noudattaa.

1. Käytä säästeliäästi ja vain tarvittaessa

Älä aktivoi "wake lockia" oletuksena koko verkkosivustollasi. Sitä tulisi käyttää vain tietyissä näkymissä tai käyttäjäpoluissa, joissa se tarjoaa selvää hyötyä. Esimerkiksi uutissivustolla et tarvitse "wake lockia" etusivulla, mutta se voisi olla käyttäjän määritettävissä oleva vaihtoehto pääartikkelinäkymässä.

2. Käynnistä käyttäjän toiminnosta

API vaatii jo käyttäjän eleen alkuperäiseen pyyntöön. Hyödynnä tätä. Paras käytäntö on sitoa "wake lock" nimenomaiseen käyttäjän toimenpiteeseen, kuten "Aloita esitys" -painikkeen napsauttamiseen, "Aloita ruoanlaittotila" -kytkimeen tai treenivideon toistamiseen. Tämä varmistaa, että käyttäjä on hallinnassa ja ymmärtää, miksi näyttö pysyy päällä.

3. Anna selkeää visuaalista palautetta

Ilmoita käyttäjälle, kun "wake lock" on aktiivinen. Tämä voi olla pieni kuvake, tilaviesti ("Esitystila on aktiivinen") tai muutos käyttöliittymässä. On myös erittäin tärkeää tarjota helppo ja ilmeinen tapa, jolla käyttäjä voi poistaa "wake lockin" käytöstä. Tämä kunnioittaa käyttäjän autonomiaa ja estää tilanteita, joissa hän ei saa näyttöään nukkumaan halutessaan.

4. Hallitse elinkaarta huolellisesti

Vapauta "wake lock" aina, kun sitä ei enää tarvita. Jos käyttäjä lopettaa esityksensä tai siirtyy pois reseptisivulta, sovelluslogiikkasi tulisi automaattisesti vapauttaa lukko. Älä luota pelkästään siihen, että käyttäjä poistaa sen manuaalisesti käytöstä tai vaihtaa välilehteä.

5. Muista akun kesto

Ensisijainen syy näyttöjen sammumiseen on akun säästäminen. Vaikka sovelluksesi saattaa olla tärkeä, tyhjä akku on paljon suurempi ongelma käyttäjälle. Punnitse aina käyttökokemuksen hyötyä lisääntyneen virrankulutuksen kustannuksia vastaan. Pitkäkestoisissa tehtävissä harkitse käyttäjän muistuttamista siitä, että näyttö pidetään hereillä ja se saattaa kuluttaa enemmän akkua.

6. Hallittu heikentyminen on avainasemassa

Wake Lock API:a ei vielä tueta kaikissa selaimissa. Sovelluksesi on toimittava täydellisesti myös ilman sitä. "Wake lockia" tulisi kohdella progressiivisena parannuksena – ominaisuutena, joka parantaa kokemusta tuetuilla selaimilla oleville käyttäjille, mutta jonka puuttuminen ei riko ydintoiminnallisuutta muilta.

Yhteenveto: Uusi standardi keskeytymättömille kokemuksille

Wake Lock API on merkittävä edistysaskel verkkoalustalle. Se korvaa vanhat, tehottomat kikkailut standardoidulla, turvallisella ja virrankulutusta huomioivalla ratkaisulla yleiseen käyttökokemusongelmaan. Sallimalla verkkosovellusten estää näytön nukahtamisen hallitusti ja käyttäjäystävällisesti, se avaa uuden tason interaktiivisuudelle monenlaisille sovelluksille – esitystyökaluista ja digitaalisista kioskeista kuntoilu- ja ruoanlaittosovelluksiin, joita ihmiset käyttävät ympäri maailmaa.

Ymmärtämällä sen mekaniikkaa, toteuttamalla sen vankasti ja noudattamalla parhaita käytäntöjä voit hyödyntää tätä API:a poistaaksesi merkittävän käyttäjän kitkakohdan. Muista käyttää sitä harkitusti, aseta aina käyttäjän hallinta ja tietoisuus etusijalle ja rakenna sovelluksia, jotka tarjoavat saumattoman, keskeytymättömän ja todella ilahduttavan kokemuksen.